<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<%@ include file="/jsp/common/common.jsp" %>
<script src="<%=basePath%>/static/js/jquery.ztree.all-3.5.min.js"></script>
<link href="<%=basePath%>/static/css/metroStyle.css" rel="stylesheet" type="text/css">
</head>
<body>

<div class="documentContent"  id="documentContent">
	<div class="top-div"><em></em><span>&nbsp;>&nbsp;人员组织架构&nbsp;>&nbsp;机构管理</span></div>
	<div>
		<div class="wf-content-left" style="width: 30%;">
			<div style="margin: 5px;">
				域：
				<select class="table-input" id="domain" style="width: 30%;">
					<option value="">请选择</option>
				</select>
				<button class="btn-table" id="addOrgButton">新建</button>
				<button class="btn-table" id="deleteOrgButton">删除</button>
				<button class="btn-table" id="forbidOrgButton">禁用</button>
			</div>
			<ul id="ztreeUl" class="ztree"></ul>
		</div>
		<div class="wf-content-right" style="width: 69%;padding-left: 2px;">
		  <div style="height: 180px;">
		  	<!-- form-box -->
			<div class="form-box">
				<h2 class="form-title">基本信息</h2>
				<div class="form-content">
				 	<table width="100%" border="0" cellpadding="0" cellspacing="0" class="form-table">
				 		<tr>
				 			<td width="15%" class="form-table-tdleft">名称</td>
				 			<td width="35%"><input class="table-input" name="name" id="name" value="" /></td>
				 			<td width="15%" class="form-table-tdleft">编号</td>
				 			<td width="35%"><input class="table-input" name="serialNumber" id="serialNumber" value="" /></td>
				 		</tr>
				 		<tr>
				 			<td class="form-table-tdleft">级别</td>
				 			<td><select class="table-input" id="levelId"></select></td>
				 			<td class="form-table-tdleft">状态</td>
				 			<td>
					 			<select class="table-input" id="state">
						  			<option value="A">启用</option>
						  			<option value="F">禁用</option>
					      	   	</select>
				      	   	</td>
				 		</tr>
				 	</table>
				 	
				 	<input type="hidden" name="id" id="id" value="" />
				 	<input type="hidden" name="domainId" id="domainId" value="" />
				</div>
			</div>
			<!-- form-box -->
		  </div>
		  <div style="height: 20px;padding-left: 20px;">
		  	<button class="btn-table" id="saveOrgButton">保存机构信息</button>
		  	<button class="btn-table" id="addUserToOrg">添加</button>
		  	<button class="btn-table" id="deleteUserFromOrg">删除</button>
		  	<button class="btn-table" id="searchUserOrg">查询</button>
		  </div>
		  <div class="tablelist" style="margin-left: 2px;">
		    <div class="tabcon" id="middleCon"  style="overflow: auto;"></div>
		    <div id="paginationDiv"  class="page clearfix"></div>
		  </div>
		</div>
	</div>
</div>

<script type="text/javascript">

/**
 * 全局变量
 */
var zTreeGobalObjcet;
var tablegridGobalObject;

$(document).ready(function(){
	
	var bodyHt=document.documentElement.clientHeight;
	var tableDivHeight = bodyHt-247;	
	$('#middleCon').height(tableDivHeight-60);
	
	blindButton();
	
	getPageData();
	
});



/**
 * 初始化zTree
 */
function initzTree(domainId){
	
	var zTreeUrl = '<%=basePath%>/biz/ou/org/getOrganizationData.do?domainId='+domainId;
	var setting = {
			check: {
				enable: true
			},
			async:{
				enable:true,
				type:'post',
				url: zTreeUrl
			},
    		view: {
    			dblClickExpand: false,
    			showLine: true,
    			selectedMulti: true,
    			showIcon:true
    		},
    		data: {
    			simpleData: {
    				enable:true,
    				idKey: "id",
    				pIdKey: "parentId",
    				rootPId: "-1"
    			}
    		},
    		check: {
    			enable: true,
    			chkStyle: 'radio',
    			radioType:'all'
    		},

    		callback: {
    			onClick: zTreeOnClick,
    			onCheck: zTreeOnCheck,
    			onAsyncSuccess: function(){
    				zTreeGobalObjcet.expandAll(true);
    			}

    		}
    	};
    
	zTreeGobalObjcet = $.fn.zTree.init($('#ztreeUl'), setting, null);
}

function zTreeOnClick(event, treeId, treeNode){
	$.each(treeNode,function(key,value){
		if($('#'+key)){
			$('#'+key).val(value);
		}
	});
	
	//生成部门下身份的表格
	getOrgEmployeeIdentity(treeNode.id);
}


/**
 * 生成部门下身份的表格
 */
function getOrgEmployeeIdentity(orgId){
	
	var url = "<%=basePath%>/biz/ou/employee/getEmployeeIdentityListData.do?domainId="+$('#domain').val();
	url = url + '&orgId='+orgId;
	tablegridGobalObject = $('#middleCon').tablegrid({
		url: url,
		columns:[	
		         	{field:'id',ischeckbox:true,align:'center',width:4},
		   	        {field:'empName',title:'姓名',width:19},
		   	        {field:'empSerialNumber',title:'员工编号',width:19},
		   	     	{field:'accountName',title:'登陆账户名称',width:20},
		   	     	{field:'positionName',title:'职务名称',width:19},
		   	     	{field:'positionLevel',title:'职务级别',width:19}
		   	     	
			    ],
	    isPagination: true,
	    resizeColumns: true,
	    isFristData: true,
	    pageConifg: {
	    	pageId : 'paginationDiv'
	    },
	    tableClass : 'table-form'
	});
	
}

function zTreeOnCheck(event, treeId, treeNode){

}

function blindButton(){
	
	//域 下拉框
	$('#domain').on('change',function(){
		if($(this).val() != ''){
			initzTree($(this).val());
			getOrgLevel($(this).val())
		}else{
			$.fn.zTree.destroy();
			$('#levelId').empty();
		}
	});
	
	//添加机构
	$('#addOrgButton').on('click',function(){
		
		if($('#domain').val() === ''){
			showAlert('请选择域');
			$('#domain').focus();
			return;
		}
		
		var nodes = zTreeGobalObjcet.getCheckedNodes(true);
		
		if(!nodes || nodes.length == 0){
			showAlert('请选择需要添加机构的父节点');
			return;
		}
		
		var url = '<%=basePath%>/biz/ou/org/showOrganizationAdd.do?domainId='+$('#domain').val();
		url = url + '&parentId='+nodes[0].id;
		
		var editPage = new $.layer({
			type:'iframe',
			title: '新建机构',
			width:470,
			height:410,
			content:url,
			buttonArray:[
			   {
				   name: '取消',
				   callback:function(){
					   editPage.close();
				   }
			   },
			   
			   {
				   name: '确定',
				   callback:function(){
					   var iframeObj = editPage.getIFrame();
					   iframeObj[0].contentWindow.onConfrim(editPage,zTreeGobalObjcet);
				   }
			   }
			]
		});
		
		editPage.show();
		
	});
	
	//添加人员到机构
	$('#addUserToOrg').on('click',function(){
		
		if($('#domain').val() === ''){
			showAlert('请选择域');
			$('#domain').focus();
			return;
		}
		
		var url = '<%=basePath%>/biz/ou/org/showEmployeeIdentityAdd.do?domainId='+$('#domain').val();
		url = url + '&orgId='+$('#id').val();
		
		var userLayer = new $.layer({
			type:'iframe',
			title: '添加人员',
			width:870,
			height:510,
			content:url,
			buttonArray:[
			   {
				   name: '取消',
				   callback:function(){
					   editPage.close();
				   }
			   },
			   
			   {
				   name: '确定',
				   callback:function(){
					   var iframeObj = userLayer.getIFrame();
					   iframeObj[0].contentWindow.onConfrim(userLayer,tablegridGobalObject);
				   }
			   }
			]
		});
		
		userLayer.show();
		
	});
	
}

function getOrgLevel(domainId){
	var url = '<%=basePath%>/biz/ou/org/getOrganizationLevelData.do?domainId='+domainId;
	
	$.ajax({  
        url:url,  
        type:'post',  
        dataType:'json',  
        success:function(data,textStatus,jqXHR){  
        	
        	$('#levelId').append('<option value="">请选择</option>');
        	
        	$(data.data).each(function(index,entry){
        		var optionObj = $('<option></option>').append(entry.orgLevelName).attr('value',entry.id);
        		$('#levelId').append(optionObj);
        	});
        	
        },  
        error:function(XMLHttpRequest,textStatus,errorThrown){  
        }                     
    });
	
}

function getPageData(){
	
 	var url = '<%=basePath%>/biz/domain/getAllDomain.do';
 	
	$.ajax({  
        url:url,  
        type:'post',  
        dataType:'json',  
        success:function(data,textStatus,jqXHR){  
        	$(data).each(function(index,entry){
        		var optionObj = $('<option></option>').append(entry.name).attr('value',entry.id);
        		$('#domain').append(optionObj);
        	});
        	
        },  
        error:function(XMLHttpRequest,textStatus,errorThrown){  
        }                     
    });
	
}

</script>
</body>
</html>